import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import Constant from '../Constant/Constant'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import RouterUtils from '../Utils/RouterUtils'
import StorageUtils from '../Utils/StorageUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class UserChangePassword extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '修改密码',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerLeft: <View/>,
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            loading: false,
            oldPwd: '',
            newPwd: '',
            newRepeatPwd: '',
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('UserChangePassword', this.props.navigation.state.key);
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('UserChangePassword', this.props.navigation.state.key);
    }

    changePwd()
    {
        try
        {
            RuleUtils.checkEmpty(this.state.oldPwd, '原密码不能为空');
            RuleUtils.checkEmpty(this.state.newPwd, '新密码能为空');
            RuleUtils.checkEmpty(this.state.newRepeatPwd, '再次输入新密码不能为空');
            RuleUtils.checkPwdValid(this.state.newPwd)
            RuleUtils.checkPwdValid(this.state.newRepeatPwd)
            RuleUtils.checkTwoPwdEquals(this.state.oldPwd, this.state.newPwd);
            RuleUtils.checkPwdEquals(this.state.newPwd, this.state.newRepeatPwd);
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    var data = {'oldPassword': EncryptUtils.md5(that.state.oldPwd), 'newPassword': EncryptUtils.md5(that.state.newPwd), 'newPassword1': EncryptUtils.md5(this.state.newPwd),'newPassword2': this.state.newPwd};
                    HttpUtils.postJson(Constant.updatePassword, session, data, function (resultcode, data)
                    {
                        ToastUtils.toastShortBottom('修改密码成功');
                        that.props.navigation.goBack();
                        that.props.navigation.navigate('UserLogin');
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    render()
    {
        return (
            <ScrollView style={styles.container} keyboardShouldPersistTaps={'always'}>
                {/*<Spinner visible={this.state.loading} size={Spinner.normal} cancelable={true} color={ColorUtils.blue}/>*/}
                <View style={{flexDirection: 'column', borderTopWidth: 1, borderTopColor: '#e4e4e4'}}>
                    <View style={{height: 50, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{margin: 16, flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.gray}}>原密码</Text>
                        <TextInput value={this.state.oldPwd}  underlineColorAndroid='transparent' keyboardType='default' maxLength={20} placeholder='请输入原密码' onChangeText={(text) => this.setState({oldPwd: text})} multiline={false}
                                   style={{color: ColorUtils.gray, fontSize: ScreenUtils.Font_14, width: 120, height: 50, flex: 1, textAlign: 'right', marginRight: 16}}/>
                    </View>
                    <View style={{height: 50, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{margin: 16, flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.gray}}>新密码</Text>
                        <TextInput value={this.state.newPwd}  underlineColorAndroid='transparent' keyboardType='default' maxLength={20} placeholder='请输入新密码' onChangeText={(text) => this.setState({newPwd: text})} multiline={false} style={{color: ColorUtils.gray, fontSize: ScreenUtils.Font_14, width: 240, height: 50, textAlign: 'right', marginRight: 16}}/>
                    </View>
                    <View style={{height: 50, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{margin: 16, flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.gray}}>确认密码</Text>
                        <TextInput value={this.state.newRepeatPwd}  underlineColorAndroid='transparent' keyboardType='default' maxLength={20} placeholder='请再次输入新密码' onChangeText={(text) => this.setState({newRepeatPwd: text})} multiline={false} style={{color: ColorUtils.gray, fontSize: ScreenUtils.Font_14, width: 240, height: 50, textAlign: 'right', marginRight: 16}}/>
                    </View>
                </View>
                <View style={{margin: 32}}>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.changePwd()}>
                        <View style={{justifyContent: 'center', alignItems: 'center', height: 44, padding: 4, borderRadius: 6, backgroundColor: ColorUtils.blue}}>
                            <Text style={{color: ColorUtils.white, fontSize: ScreenUtils.Font_14}}>
                                修改
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.bgColor,
    },
});


